<script setup>
import {  getWarehouseListApi, } from '@/api/warehouse';
import { addWarehouseAreaApi, getWarehouseAreaListApi, updateWarehouseAreaApi } from '@/api/warehouseArea';
import { addWarehouseLocaApi, updateWarehouseLocaApi } from '@/api/warehouseAreaLoca';
import { ElMessage } from 'element-plus';
import { getCurrentInstance, onMounted, ref, watch } from 'vue';


//获取当前Vue实例
const instance = getCurrentInstance()
const ruleFormRef = ref(null)
const dialogFormVisible = ref(false)
const title = ref('')
const WarehouseArea = ref([])
const Warehouse = ref([])
const LocaForm = ref({
    id: '',
    locaCode: '',
    warehouseId: '',
    warehouseAreaId: '',
    locaLen: '',
    locaWidth: '',
    locaHeight: '',
    localVolume: '',
    localBearingCapacity: '',
    tunnelNumber: '',
    shelfNumber: '',
    layerNumber: '',
})

const reset = () => {
    LocaForm.value = {
        id: '',
        locaCode: '',
        warehouseId: '',
        warehouseAreaId: '',
        locaLen: '',
        locaWidth: '',
        locaHeight: '',
        localVolume: '',
        localBearingCapacity: '',
        tunnelNumber: '',
        shelfNumber: '',
        layerNumber: '',
    }
}

const save =async () => {
     if (!ruleFormRef) return
    await ruleFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            let res = null
            if (LocaForm.value.id) {
                res = await updateWarehouseLocaApi(LocaForm.value)
            }else {
                res = await addWarehouseLocaApi(LocaForm.value)
            }
            if (res.code == 1) {
                ElMessage.success('操作成功')
                dialogFormVisible.value = false
                instance.emit('refresh')
            }else{
                ElMessage.error('操作失败')
            }
        } else {
        console.log('error submit!', fields)
        }
    })
}


const rules = ref({
  locaCode: [
    { required: true, message: '名字不能为空', trigger: 'blur' }
  ],
})


const getWarehouseList = async ()=>{
  const result = await getWarehouseListApi()
  Warehouse.value = result.data
}

const getWarehouseAreaList = async ()=>{
  const result = await getWarehouseAreaListApi(LocaForm.value.warehouseId)
  WarehouseArea.value = result.data
}

defineExpose({
    dialogFormVisible,
    title,
    LocaForm,
    reset,
    // isPcdDisabled // 暴露这个属性
})

// 监听 warehouseId 的变化
watch(
  () => LocaForm.value.warehouseId,
  (newVal, oldVal) => {
    // 当 warehouseId 发生变化时调用 getWarehouseAreaList 方法
    if (newVal !== oldVal) {
      getWarehouseAreaList()
    }
  }
)

onMounted(()=>{
  getWarehouseList()
})
</script>

<template>
    <el-dialog style="width: 400px;" v-model="dialogFormVisible" :title="title">
    <el-form :model="LocaForm" :rules="rules" ref="ruleFormRef" label-width="auto">
      <el-form-item label="库位名称" placeholder="请输入" prop="locaCode" >
        <el-input v-model="LocaForm.locaCode" />
      </el-form-item>
      <el-form-item label="所属仓库" placeholder="请选择" >
        <el-select v-model="LocaForm.warehouseId"  placeholder="请选择">
          <el-option
            v-for="item in Warehouse"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属库区" placeholder="请选择" >
        <el-select v-model="LocaForm.warehouseAreaId"  placeholder="请选择">
          <el-option
            v-for="item in WarehouseArea"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="库位长度" placeholder="请输入" >
            <el-input v-model="LocaForm.locaLen" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库位宽度" placeholder="请输入"  >
            <el-input v-model="LocaForm.locaWidth" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="库位高度" placeholder="请输入">
        <el-input v-model="LocaForm.locaHeight" />
      </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库位容积" placeholder="请输入">
        <el-input v-model="LocaForm.localVolume" />
      </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="库位承重" placeholder="请输入" >
        <el-input v-model="LocaForm.localBearingCapacity" />
      </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巷道号" placeholder="请输入" >
        <el-input v-model="LocaForm.tunnelNumber" />
      </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="货架号" placeholder="请输入" >
        <el-input v-model="LocaForm.shelfNumber" />
      </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="层号" placeholder="请输入" >
        <el-input v-model="LocaForm.layerNumber" />
      </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>